<template>
  <!-- 导航区域 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>论坛管理</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索区域 -->
  <div style="margin: 10px 0">
    <el-button type="primary" style="margin-right: 20px;" @click="addopen"><el-icon><Plus /></el-icon>添加评论信息</el-button>
    <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="评论用户id" v-model="userid"></el-input>
    <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="所属文章id" v-model="articleid"></el-input>
    <el-button type="primary" @click="getremarkList">搜 索</el-button>
    <el-button type="warning" @click="reset">重 置</el-button>
  </div>
  <!-- 主体区域 -->
  <el-table :data="remarkList" border style="width: 100%">
    <el-table-column type="index"></el-table-column>
    <el-table-column label="评论用户id" prop="userid" width="150%"/>
    <el-table-column label="用户姓名" width="150%">
      <template #default="scope">
        <div v-for="item in userList" :key="item">
          <div v-if="item.id == scope.row.userid">
            {{ item.account }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="所属文章id" prop="articleid" width="150%"/>
    <el-table-column label="文章标题" width="300%">
      <template #default="scope">
        <div v-for="item in articleList" :key="item">
          <div v-if="item.id == scope.row.articleid">
            {{ item.articletitle }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="评论内容" prop="articletext" width="730%"/>
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.id)">修 改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删 除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
  <div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                   :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
  <!-- 新增区域 -->
  <el-dialog v-model="dialogVisible" title="评论信息" width="30%">
    <el-form label-width="80px" size="small">
      <el-form-item label="评论用户id">
        <el-input size="small" v-model="form.userid" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属文章id">
        <el-input size="small" v-model="form.articleid" type="text" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="评论内容">
        <el-input v-model="form.articletext" type="text" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
    </template>
  </el-dialog>
</template>
<script>
export default{
  name: "RemarkView",
  data() {
    return {
      remarkList: [],
      userList:[],
      articleList:[],
      dialogVisible: false,
      form: {},
      userid: '',
      articleid: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    this.getremarkList();
    this.getuserList();
    this.getarticleList();
  },
  methods:{
    //新增宠物框打开方法
    addopen(){
      this.form = {};
      this.dialogVisible =true;
    },
    //搜索框重置方法
    reset() {
      (this.userid = ''), (this.articleid = ''), this.getremarkList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getremarkList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getremarkList();
    },
    //修改模态框展开并且获取原本数据方法
    handleEdit(remarkid) {
      this.dialogVisible = true;
      this.$http.get("/remark/" + remarkid).then((res) => {
        if (res.data.status == 200) {
          this.form = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //删除宠物方法
    handleDelete(remarkid) {
      this.$http.delete("/remark/" + remarkid).then((res) => {
        if (res.data.status == 200) {
          this.$message.success("删除成功"),
              this.getremarkList();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    //修改新增宠物方法
    save() {
      this.$http.post("/remark/", this.form).then((res) => {
        if (res.data.status == 200) {
          this.$message.success("保存成功"),
              this.dialogVisible = false,
              this.getremarkList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //获取用户列表
    getuserList() {
      this.$http.get("/user").then((res) => {
        if (res.data.status == 200) {
          //console.log(res);
          this.userList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //获取用户列表
    getarticleList() {
      this.$http.get("/article").then((res) => {
        if (res.data.status == 200) {
          //console.log(res);
          this.articleList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //获取评论列表
    getremarkList() {
      //请求分页查询数据
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userid: this.userid,
        articleid: this.articleid,
      };
      this.$http.get("/remark/page", { params }).then((res) => {
        //console.log(res);
        if (res.data.status == 200) {
          this.remarkList = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  }
}
</script>
<style>

</style>